<template>
<div class='general-view'>
  <div class='dashboardArea' >
    <h1>问卷完成情况</h1>
    <div id='dash-container'></div>
  </div>
  <div class='dataArea'>
    <el-table
      :data="systemArr"
      style="width: 100%"
      border
      sortable
    >
      <el-table-column
        type="index"
        label="序号"
        align='center'
        >
      </el-table-column>
      <el-table-column
        prop="submitOs"
        label="系统"
        align='center'
      >
      </el-table-column>
      <el-table-column
        prop="submitBrowser"
        label="浏览器"
        align='center'
      >
      </el-table-column>
      <el-table-column
        prop="submitRequestIp"
        label="IP"
        align='center'
      >
      </el-table-column>
      <el-table-column
        prop="submitAddress"
        label="地址"
        align='center'
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="填写时间"
        align='center'
      >
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<script>
  import { Chart, registerShape } from '@antv/g2';
  export default {
    name: 'GeneralSituation',
    props: [
      'projectKey'
    ],
    data() {
      return {
        totalData: {},
        limitCount: 50,
        systemArr: []
      }
    },
    created() {
    },
    mounted() {
      this.getTotalData().then(() => this.initDashBoard())
    },
    methods: {
      async getTotalData() {
        const { data: res } = await this.$http.post('/project/result/page',{ projectKey: this.projectKey })
        console.log('+++',res.data)
        if (res.code === 200) {
          this.$message.success('获取问卷总览数据成功!')
          this.totalData = res.data
          this.systemArr = res.data.list
        }
      },
      makeSystemArr(arr) {
        const newArr = []
        for (const item of arr) {
          newArr.push({
              submitOs: item.submitOs,
              submitBrowser: item.submitBrowser ,
              submitRequestIp: item.submitRequestIp,
              submitAddress: item.submitAddress,
              createTime: item.createTime

          })
        }
        return newArr
      },
      initDashBoard() {
        // 自定义Shape 部分
        registerShape('point', 'pointer', {
          draw(cfg, container) {
            const group = container.addGroup();
            const center = this.parsePoint({ x: 0, y: 0 }); // 获取极坐标系下画布中心点
            // 绘制指针
            group.addShape('line', {
              attrs: {
                x1: center.x,
                y1: center.y,
                x2: cfg.x,
                y2: cfg.y,
                stroke: cfg.color,
                lineWidth: 5,
                lineCap: 'round'
              }
            });
            group.addShape('circle', {
              attrs: {
                x: center.x,
                y: center.y,
                r: 9.75,
                stroke: cfg.color,
                lineWidth: 4.5,
                fill: '#fff'
              }
            });

            return group;
          }
        });
        const data = [{ value: (this.totalData.total / this.limitCount) * 10 }];
        const chart = new Chart({
          container: 'dash-container',
          autoFit: true,
          height: 250,
          padding: [0, 0, 30, 0]
        });
        chart.data(data);
        chart.scale('value', {
          min: 0,
          max: 9,
          tickInterval: 1
        });
        chart.coordinate('polar', {
          startAngle: (-9 / 8) * Math.PI,
          endAngle: (1 / 8) * Math.PI,
          radius: 0.75
        });

        chart.axis('1', false);
        chart.axis('value', {
          line: null,
          label: {
            offset: -36,
            style: {
              fontSize: 18,
              textAlign: 'center',
              textBaseline: 'middle'
            }
          },
          subTickLine: {
            count: 4,
            length: -15
          },
          tickLine: {
            length: -24
          },
          grid: null
        });
        chart.legend(false);
        chart
          .point()
          .position('value*1')
          .shape('pointer')
          .color('#EB9F9F')
          .animate({
            appear: {
              animation: 'fade-in'
            }
          });

// 绘制仪表盘背景
        chart.annotation().arc({
          top: false,
          start: [0, 1],
          end: [9, 1],
          style: {
            // 底灰色
            stroke: '#CBCBCB',
            lineWidth: 18,
            lineDash: null
          }
        });

// 绘制指标
        chart.annotation().arc({
          start: [0, 1],
          end: [data[0].value, 1],
          style: {
            stroke: '#EB9F9F',
            lineWidth: 18,
            lineDash: null
          }
        });
// 绘制指标数字
        chart.annotation().text({
          position: ['50%', '85%'],
          content: '填写完成率',
          style: {
            fontSize: 20,
            fill: '#545454',
            textAlign: 'center'
          }
        });
        chart.annotation().text({
          position: ['50%', '90%'],
          content: `${data[0].value * 10} %`,
          style: {
            fontSize: 36,
            fill: '#545454',
            textAlign: 'center'
          },
          offsetY: 15
        });

        chart.render();
      }
    }
  }
</script>

<style lang="less" scoped>
@import "src/assets/css/themeColor";
  *{
    box-sizing: border-box;
  }
  .general-view{
    padding: 10px;
    overflow-y: auto;
  }
  .general-view> div{
    padding: 15px;
    float: left;

   }
  .dashboardArea{
    //background-color: pink;
    width: 100%;
    height: 300px;
    border-bottom: #ddd 1px dashed;
    margin-bottom: 10px;
  }
  h1{
    font-size: 22px;
    color: @theme_gray;
    letter-spacing: 10px;
    margin-bottom: 10px;
  }
  .dataArea{
    width: 100%;
    min-height: 300px;
  }

</style>
